<template>
	<view class="schedule">
		<tui-navigation-bar :titleSize="18" :titleLineHeight="18" :titlefontWeight="800" :isOpacity="false"
			:splitLine="true" @init="initNavigation" title="日程表" backgroundColor="#fff" color="#000">
			<view class="tui-header-icon" :style="{ marginTop: top + 'px' }">
				<tui-icon name="arrowleft" color="#333" @click="back"></tui-icon>
			</view>
		</tui-navigation-bar>
		<view class="content" :style="{ paddingTop: marginTop + 'px' }">
			<view class="calendar-date">
				<view class="date-item" v-for="(item, index) in dateList" @click="switchSchedule(item,index)">
					<view class="date" :class="selDate==item.date?'selDate':''">
						<tui-text :text="item.day" :size="38" fontWeight="600" padding="0"
							style="text-align: center;" :color="selDate==item.date?'#fff':'#999'"></tui-text>
						<tui-text :text="item.month+'月'" :size="28" :color="selDate==item.date?'#fff':'#999'" padding="12rpx 0 0 0"></tui-text>
					</view>
					<tui-badge dot v-if="item.workList && item.workList.length > 0 && !item.isCheck" type="danger" margin="0 auto"></tui-badge>
					<tui-badge dot v-if="item.workList && item.workList.length > 0 && item.isCheck" type="gray" margin="0 auto"></tui-badge>
				</view>
			</view>
			<view class="schedule-list">
				<view class="schedule-item">
					<view class="time" v-for="(item, index) in timeList">{{item.hourShow}}</view>
				</view>
				<view class="schedule-item work-item">
					<view class="work" :style="{backgroundColor: item.isExpire ? '#F5F5F5' : '#E8FAFA',top: item.top+'rpx'}" v-for="(item, index) in workListSel">
						<tui-text :text="item.reserveBeginTime+'-'+item.reserveEndTime" size="36" fontWeight="600" block></tui-text>
						<view class="work-address">
							<tui-icon name="gps" :size="28" unit="rpx" color="#666" margin="0 8rpx 0 0"></tui-icon>
							{{item.inviteMerchant.address}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getSchedule} from '@/http/api/tutor/tutor.js'
	export default {
		data() {
			return {
				// 导航栏
				top: 0, //标题图标距离顶部距离
				marginTop: 0, // 页面内容距离顶部的距离
				selDate: '',// 当前选中日期

				// 数据
				dateList: [],
				timeList: [
					{
						hour: 7,
						hourShow: '07:00'
					},{
						hour: 9,
						hourShow: '09:00'
					},{
						hour: 11,
						hourShow: '11:00'
					},{
						hour: 13,
						hourShow: '13:00'
					},{
						hour: 15,
						hourShow: '15:00'
					},{
						hour: 17,
						hourShow: '17:00'
					},{
						hour: 19,
						hourShow: '19:00'
					},{
						hour: 21,
						hourShow: '21:00'
					},{
						hour: 23,
						hourShow: '23:00'
					}
				],
				workListSel: []
			}
		},
		onLoad() {
			// 使用函数
			this.dateList = this.getNextSevenDays();
			this.selDate = this.dateList[0].date;
			this.fetchData()
		},
		methods: {
			// 请求日程数据
			fetchData() {
				  for(let i = 0; i < 7; i++){
					// 假设这是从服务器获取的数据并更新到dateList中
					let dateStr = this.dateList[i].date;
					getSchedule({date:dateStr}).then(res => {
						if (res.code == 200) {
							// 请求成功，处理数据
							this.dateList[i].workList = res.data;
							if(i==0){
								this.workListSel = res.data;
								this.dealScheduleData();
							}
						} else {
							this.$utils.toast(res.msg)
						}
					}).catch(res => {
						this.$utils.toast(res)
					})
				  }
			},
			// 导航栏
			initNavigation(e) {
				this.top = e.top;
				this.marginTop = e.height;
			},
			back() {
				uni.navigateBack({
							        delta: 1
							    });;
			},
			switchSchedule(item,index){
				this.dateList[index].isCheck = true; // 是否查看
				this.selDate = item.date;
				this.workListSel = item.workList;
				this.dealScheduleData();
			},
			dealScheduleData(){
				console.log("dealScheduleData");
				// 获取当前时间
				let currentTime = new Date();
				for(let i = 0;i < this.workListSel.length; i++){
					let reserveBeginTime = this.workListSel[i].reserveBeginTime;
					let reserveEndTime = this.workListSel[i].reserveEndTime;
					// 遍历判断邀约是否过期
					let inviteTime = new Date(this.workListSel[i].reserveDate + ' ' + reserveEndTime + ":00");
					let isExpire = false;
					if(inviteTime < currentTime){
						isExpire = true;
					}
					this.workListSel[i].isExpire = isExpire;
					// 邀约距离顶部的距离
					let wHour = Number(reserveBeginTime.split(":")[0]);
					for(let j = 0;j < this.timeList.length; j++){
						let tHour = this.timeList[j].hour;
						let nHour = tHour;
						if(j+1 <= this.timeList.length){
							nHour = this.timeList[j+1].hour;
						}
						let top = 0;
						if(j==0 && wHour == tHour){
							this.workListSel[i].top = top;
							break;
						} else if(j>0 && wHour == tHour){
							top = j * 146 - 15;
							this.workListSel[i].top = top;
							break;
						}else if(wHour > tHour && wHour < nHour){
							top = j * 146 + 73;
							this.workListSel[i].top = top;
							break;
						}
					}
				}
			},
			// 获取从今天开始未来7天的日期
			getNextSevenDays(){
				let dates = [];
				for (let i = 0; i < 7; i++) {
					let date = new Date();
					date.setDate(date.getDate() + i);
					let dateStr = date.toISOString().split('T')[0];
					let month = date.getMonth()+1;
					let day = date.getDate();
					let dateObject = {
						date: dateStr,
						month: month,
						day: day,
						isCheck: false
					};
					dates.push(dateObject); 
				}
				return dates;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.work-address{
		color: gray;
		font-size: 28rpx;
		padding: 10rpx 0 0 0;
	}
	.schedule {
		background-color: #fff;
		width: 100vw;
		// height: 100vh;
		.tui-header-icon {
			width: 100%;
			position: fixed;
			top: 0;
			padding: 0 0 0 38rpx;
			display: flex;
			align-items: center;
			height: 32px;
			transform: translateZ(0);
			box-sizing: border-box;
		}
		.content {
			padding-bottom: 100rpx;
			.calendar-date {
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid #F5F5F5;
				padding: 30rpx 3% 20rpx 3%;
				position: fixed;
				width: 94%;
				background-color: #fff;
				z-index: 10;
				.date-item {
					display: flex;
					flex-direction: column;
					justify-content: center;

					.date {
						display: flex;
						flex-direction: column;
						background-color: #F5F5F5;
						border-radius: 24rpx;
						padding: 20rpx 19rpx;
						margin-bottom: 10rpx;
					}
				}
			}
			.schedule-list {
				padding: 250rpx 3% 0 3%;
				z-index: 5;
				display: flex;
				.schedule-item {
					width: 15%;
					.time {
						color: #999;
						width: 100%;
						font-size: 28rpx;
						margin-bottom: 112rpx;
					}
					.time:last-child{
						margin-bottom: 0;
					}
				}
				.work-item{
					width: 85%;
					position: relative;
					.work {
						display: flex;
						flex-direction: column;
						padding: 0 40rpx;
						background-color: #F5F5F5;
						border-radius: 24rpx;
						width: 85%;
						height: 170rpx;
						justify-content: center;
						position: absolute;
						top: 0;
					}
				}
			}
		}
	}
	.selDate{
		background-color: #2FD7D3!important;
	}
</style>